<template>
    <div class="database-detail">
        <el-form ref="form" :rules="rules" :model="formData"  label-width="180px" size="media" :disabled="ifFind">
            <el-row :gutter="10">
                <el-col :span="9" v-show="ifFind">
                    <el-form-item label="ID" prop="ID">
                        <el-input v-model.trim="formData.ID" prefix-icon="el-icon-info" style="width:100%" :disabled="true"/>
                    </el-form-item>
                </el-col>
                <el-col :span="9" v-show="ifFind">
                    <el-form-item label="创建时间" prop="CreatedAt">
                        <el-input v-model="formData.CreatedAt" prefix-icon="el-icon-info" style="width:100%" :disabled="true"/>
                    </el-form-item>
                </el-col>
                <el-col :span="9">
                    <el-form-item label="数据库类型" prop="database_type">
                        <el-select  placeholder="请选择" v-model="formData.database_type" style="width:100%">
                            <el-option
                                    v-for="dict in databaseOptions"
                                    :key="dict.item_value"
                                    :label="dict.item_name"
                                    :value="dict.item_value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="9">
                    <el-form-item label="管理地址" prop="vip">
                        <el-input v-model.trim="formData.vip" prefix-icon="el-icon-info" style="width:100%"/>
                    </el-form-item>
                </el-col>
                <el-col :span="9">
                    <el-form-item label="端口" prop="port">
                        <el-input v-model.trim="formData.port" prefix-icon="el-icon-info" style="width:100%"/>
                    </el-form-item>
                </el-col>
                <el-col :span="9">
                    <el-form-item label="环境名称" prop="env_name">
                        <el-select  placeholder="请选择" v-model="formData.env_name" style="width:100%">
                            <el-option
                                    v-for="dict in EnvOptions"
                                    :key="dict.item_value"
                                    :label="dict.item_name"
                                    :value="dict.item_value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="9">
                    <el-form-item label="集群名称" prop="cluster_name">
                        <el-input v-model.trim="formData.cluster_name" prefix-icon="el-icon-info" style="width:100%"/>
                    </el-form-item>
                </el-col>
                <el-col :span="9">
                    <el-form-item label="项目名称"  prop="project_code">
                        <el-select  placeholder="请选择项目"  v-model="formData.project_code"  style="width:100%">
                            <el-option
                                    v-for="(item, i) in projectOptions"
                                    :key="i"
                                    :label="item.project_fullname"
                                    :value="item.project_code"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="IDC位置" prop="idc_location" style="width:100%" >
                        <el-radio-group v-model="formData.idc_location" @change="ChangeRadio()">
                            <el-radio
                                    v-for="dict in IdcOptions"
                                    :key="dict.item_name"
                                    :label="dict.item_value"
                            >{{ dict.item_name }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="9" v-if="isShangqiyun || !isQita">
                    <el-form-item label="DNS名称" prop="dns_name">
                        <el-input v-model.trim="formData.dns_name" prefix-icon="el-icon-info" style="width:100%"/>
                    </el-form-item>
                </el-col>
                <el-col :span="9" v-if="isShangqiyun || !isQita">
                    <el-form-item label="实例名称" prop="instance_name">
                        <el-input v-model.trim="formData.instance_name" prefix-icon="el-icon-info" style="width:100%"/>
                    </el-form-item>
                </el-col>
                <el-col :span="9" v-if="!isShangqiyun || isQita">
                    <el-form-item label="数据库部署路径" prop="deploy_path">
                        <el-input v-model.trim="formData.deploy_path" prefix-icon="el-icon-info" style="width:100%"/>
                    </el-form-item>
                </el-col>
                <el-col :span="9" v-if="!isShangqiyun || isQita">
                    <el-form-item label="IP地址" prop="ip_address" style="width:100%" >
                        <el-select
                                v-model="ip_addressList"
                                multiple
                                filterable
                                allow-create
                                default-first-option @change="handleOptionClick"
                                placeholder="请选择IP" style="width:100%">
                            <el-option
                                    v-for="(item, i) in virtualOptions"
                                    :key="i"
                                    :label="item.ip_address"
                                    :value="item.ip_address"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="9">
                    <el-form-item label="公司" prop="company_code" style="width:100%" >
                        <el-select  placeholder="请选择公司" v-model="formData.company_code" style="width:100%">
                            <el-option
                                    v-for="(item, i) in companyOptions"
                                    :key="i"
                                    :label="item.company_name"
                                    :value="item.company_code"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="9">
                    <el-form-item label="数据库大小" prop="database_size">
                        <el-input v-model.trim="formData.database_size" prefix-icon="el-icon-info" style="width:100%"/>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="bottom-button" style="display: block;margin-left: 180px;width: 120px">
            <el-button v-if="!ifFind" type="primary" size="medium" @click="onSubmit">保存</el-button>
            <el-button v-else :disabled="true" type="primary" size="medium" @click="onSubmit">保存</el-button>
            <el-button size="medium" @click="goBack">取消</el-button>
        </div>

    </div>
</template>

<script>
    import {
        getDatabaseById,
        createDatabase,
        updateDatabase,
    } from "@/api/cmdb_database";
    import { formatTimeToStr } from '@/utils/date';
    import { getCompany } from "@/api/company";
    import { getProjectList }  from "@/api/cmdb_project";
    import { getServerList } from "@/api/cmdb_server";
    import infoList from '@/mixins/infoList';
    import { validateIP,isPort } from '@/utils/rules'
    export default {
        name: "databaseDetail",
        mixins: [infoList],
        data() {
            return {
                databaseOptions: [],  //数据库类型
                EnvOptions:[],        //环境名称
                IdcOptions: [], // 机房选项 - 数据来自字典
                virtualOptions: [], // 虚拟机IP属选项
                projectOptions: [],
                companyOptions: [],    // 用户列表选项
                ip_addressList:[],
                formData: {
                    ID: '',
                    database_type: '',
                    vip: '',
                    port: '',
                    env_name: '',
                    idc_location: 'SAIC-ClOUD',
                    dns_name:'',
                    instance_name:'',
                    cluster_name:'',
                    ip_address:'',
                    database_size:'',
                    deploy_path:'',
                    project_code:'',
                    company_code: '',
                    CreatedAt: null,   // 不能设置成 ''  时间格式要传递post到后端
                },
                ifFind: false,
                // 操作类型
                opType: '',   // find|edit|crate
                rules: {
                    database_type: [{ required: true, message: '请选择公司', trigger: 'blur' }],
                    vip: [{ required: true, message: '请正确输入管理IP',validator:validateIP,trigger: 'blur' }],
                    port: [{ required: true, message: '请正确输入端口',validator: isPort,trigger: 'blur' }],
                    env_name: [{ required: true, message: '请选择环境',trigger: 'blur' }],
                    idc_location: [{ required: true, message: '请选择项目经理',trigger: 'blur' }],
                    cluster_name: [{ required: true, message: '请输入集群名称',trigger: 'blur' }],
                    database_size: [{ required: true, message: '请输入数据大小',trigger: 'blur' }],
                    company_code: [{ required: true, message: '请选择公司',trigger: 'blur' }],
                    project_code: [{ required: true, message: '请选择项目归属',trigger: 'blur' }],
                },
                //上汽云显示
                isShangqiyun:true,
                isQita:false,
            }
        },
        filters: {
            formatDate: function(time) {
                if (time != null && time != '') {
                    var date = new Date(time)
                    return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
                } else {
                    return ''
                }
            },
            formatBoolean: function(s) {
                if (s == "1" ) {
                    return true
                } else {
                    return false;
                }
            },
        },
        created() {
            const id = this.$route.query.id
            if (id != null) {
                this.queryDetail(id)
            }
            // 路由参数(页面操作类型) find|create|edit
            this.opType = this.$route.query.type
            if (this.opType == 'find') {
                this.ifFind = true
            }
            // 获取公司列表
            getCompany().then(response => {
                this.companyOptions = response.data.companyList;
            }),
            getProjectList({'page':1, 'pageSize': 999}).then(response => {
                this.projectOptions = response.data.list;
            }),
            getServerList({'page':1, 'pageSize': 999}).then(response => {
                this.virtualOptions = response.data.list;
            }),
            this.databaseOptions = this.getDicItemList('database_tpye')
            this.EnvOptions = this.getDicItemList('env_name')
            this.IdcOptions = this.getDicItemList('server_idc')

        },
        methods: {
            queryDetail(id) {
                getDatabaseById({id: parseInt(id)}).then(res => {
                    if (res.code == 0) {
                        this.formData = res.data.databaseList;
                        this.ip_addressList =this.formData.ip_address.split(',');
                        this.formData.ip_address=this.ip_addressList.toString()
                        this.ChangeRadio()
                    }
                })
            },
            handleOptionClick(){
                let IPAddress=this.ip_addressList.toString();
                this.formData.ip_address=IPAddress;
            },
            async createDatabaseButton(){
                createDatabase(this.formData).then(res => {
                    this.formData.port = parseInt(this.formData.port)
                    if (res.code == 0) {
                        this.$message({
                            type: 'success',
                            message: '创建成功',
                        })
                        this.$router.push({ name: 'database'})
                    }
                })
            },
            updateDatabaseButton() {
                updateDatabase(this.formData).then(res => {
                    if (res.code == 0) {
                        this.$message({
                            type: 'success',
                            message: '更新成功',
                        })
                        this.$router.push({ name: 'database'})
                    }
                })

            },
            ChangeRadio(){
                if(this.formData.idc_location == 'SAIC-ClOUD'){
                    this.isShangqiyun=true
                    this.isQita=false
                }else {
                    this.isShangqiyun=false
                    this.isQita=true
                }
            },
            goBack() {
                this.$router.go(-1)
            },
            onSubmit() {
                this.$refs['form'].validate((valid) => {
                    if (!valid) {
                        return
                    }
                    // 编辑 提交
                    if (this.opType == 'edit') {
                        this.updateDatabaseButton()

                        // 新建
                    } else if (this.opType == 'create') {
                        this.createDatabaseButton()
                    } else {
                        this.$message({
                            type: 'error',
                            message: '未知操作类型',
                        })
                    }
                })
            }

        }
    }
</script>

<style scoped lang="scss">
    .database-detail {
        .el-input {
            width: 400px;   // 后续优化
        }
    }

</style>

